<template>
  <div class="tabs">
    <el-card class="tabs-card" shadow="hover">
      <el-tabs v-model="activeName" @tab-click="initData">
        <el-tab-pane label="正在加工的工单" name="加工中">
          <el-table :data="tableData">
            <template v-for="item in tableColumn">
              <el-table-column :label="item.label" :prop="item.prop">
                <template slot-scope="scope">
                  {{ scope.row[item.prop] }}
                </template>
              </el-table-column>
            </template>
            <template #empty>
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="加工完成的工单" name="加工完成">
          <el-table :data="tableData" height="400">
            <template v-for="item in tableColumn">
              <el-table-column :label="item.label" :prop="item.prop">
                <template slot-scope="scope">
                  {{ scope.row[item.prop] }}
                </template>
              </el-table-column>
            </template>
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import { WorkOrderInfo } from '@/api/index'
  export default {
    props: {
      activeName: {
        type: String,
        default: '加工中',
      },
    },
    components: {},
    data() {
      return {
        tableData: [],
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          total: 100,
          layout: 'total, prev, pager, next',
        },

        tableColumn: [
          {
            label: '工单状态',
            prop: 'OrderState',
          },
          {
            label: '工单编号',
            prop: 'OrderId',
          },
          {
            label: '工单名称',
            prop: 'OrderName',
          },
          {
            label: '产品名称',
            prop: 'ProductName',
          },
          {
            label: '零件数目',
            prop: 'PartNum',
          },
          {
            label: '交付时间',
            prop: 'PayTime',
          },
          {
            label: '完成数目',
            prop: 'FinishNum',
          },
          {
            label: '完成率',
            prop: 'FinshRate',
          },
          {
            label: '合格数量',
            prop: 'Qualified',
          },
          {
            label: '不合格数量',
            prop: 'Unqualified',
          },
        ],
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        const params = {
          Index: this.getPage(this.queryForm.pageNo, this.queryForm.pageSize),
          Count: this.queryForm.pageSize,
          Type: this.activeName,
        }
        console.log('paramsparams', params)
        WorkOrderInfo(params).then((res) => {
          console.log('MaintenanceInfo', res.WorkOrderList)
          this.tableData = res.WorkOrderList
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  :deep() {
  }
</style>
